.app{
	width: 100%;
	height: 100vh;
	background-color: #ffffff;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}
.loading38 {
	--r-num: 45deg; /*定义角度值*/
	width: 40px;
	height: 40px;
	position: relative;
	animation: loading38-eff 1s steps(8) both infinite;
}
.load-span38{
	width: 6px;
	height: 6px;
	display: block;
	border-radius: 3px;
	position: absolute;
	left: 17px;
	top: 0;
	transform-origin: 3px 20px;
}
.load-span38:nth-of-type(1){
	transform: rotate(var(--r-num));
	background: #2FACFD;
}
.load-span38:nth-of-type(2){
	transform: rotate(calc(var(--r-num)*2));
	background: #33B4FD;
}
.load-span38:nth-of-type(3){
	transform: rotate(calc(var(--r-num)*3));
	background: #38BEFE;
}
.load-span38:nth-of-type(4){
	transform: rotate(calc(var(--r-num)*4));
	background: #3ECAFE;
}
.load-span38:nth-of-type(5){
	transform: rotate(calc(var(--r-num)*5));
	background: #45D7FE;
}
.load-span38:nth-of-type(6){
	transform: rotate(calc(var(--r-num)*6));
	background: #4BE4FE;
}
.load-span38:nth-of-type(7){
	transform: rotate(calc(var(--r-num)*7));
	background: #52F1FF;
}
.load-span38:nth-of-type(8){
	transform: rotate(calc(var(--r-num)*8));
	background: #57FBFF;
}
@keyframes loading38-eff{
	to {
		transform: rotate(0deg);
	}
	from {
		transform: rotate(-360deg);
	}
}
